body{
	color:#fff;
	background:black;
	margin:1em auto;
	padding:1em;
	max-width: 30em;
	font:14px monospace;
	color:#99ccff;
}
 ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
footer{
	clear:both;
	margin-top:2em;
}
h1{
	font-size: clamp(10px, 2.8vw, 12.5px);
	color:#99ccff;
}

pre{
	margin: 0 auto;
}

a{
	color:#6c6;text-decoration:none;
}
a:hover,.active-page{color:#c6c;}

.navcontainer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0 auto;
	margin: 0 auto;
	padding: 0;
}

.atomcontainer {
	width: 54px;
	height: 54px;
	align-content: center;
	margin: 0 auto;
}

.electron {
	position: relative;
	display: inline-block;
	left: 32px;
	top: 0;  
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #6c6;
}
.orbit {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid #99ccff;
	animation: spin 4s linear infinite;
}
.nucleus {
	position: relative;
	display: inline-block;
	margin-top: 15px;
	margin-left: 15px;
	width: 20px;
	height: 20px;
	background-color: #6c6;
	border-radius: 50%;
}

@keyframes spin {
	from {
		transform: rotate(-360deg);
	}
	to {
		transform: rotate(0);
	}
}